<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<h1>简单计算器</h1>
		<div>
			<span>数值A：</span>
			<span>
				<input type="text" name="" id="" v-model='a'>
			</span>
			<div>
				<span>数值B：</span>
				<input type="text" name="" id="" v-model='b'>
			</div>
			<div>
				<button v-on:click='handle'>计算</button>
			</div>
			<div>
				<span>计算结果：</span>
				<span v-text='result'></span>
			</div>
		</div>
	</div>
		<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javaScript">
		var vm = new Vue({
			el: "#app",
			data: {
				a: '',
				b: '',
				result: ''
			},
			methods: {
				handle() {
					// 实现计算逻辑
					this.result = parseInt(this.a) + parseInt(this.b);
				}
			}
		})

	</script>
</body>
</html>